<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onLoad="init()" style="min-width: 800px">

<!-- audio network BEGIN - this kind of booting only for 'AudioNetwork' development -->
<!-- <script>
    var AudioNetworkBootConfig = {
        devScriptLoad: true
    };
</script>
<script src="../../src/audio-network-boot.js"></script> -->
<!-- audio network END -->

<script src="https://cdn.rypula.pl/audio-network/v1.3.2/audio-network-v1.3.2.min.js"></script>

<div style="width: 400px; float: left;">
    <h2>Socket A</h2>

    <button onClick="transportLayerMockA.$$socket.close()">Close</button>
    <button onClick="transportLayerMockA.$$socket.listen()">Listen</button>
    <button onClick="transportLayerMockA.$$socket.connect()">Connect</button>
    <button onClick="transportLayerMockA.$$socket.send([0x86, 0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x21])">Send 'Hello!'</button>
    <button onClick="transportLayerMockA.$$socket.send([0x82, 0x48, 0x69])">Send 'Hi'</button>

    <button onClick="transportLayerMockA.$$socket.send(getByteListFromAsciiString(getFormFieldValue('#socket-a-textarea')))">Send texarea</button>

    <pre id="socket-a-rx-data-chunk" style="border: 1px solid red; padding: 10px;"></pre>

    <textarea id="socket-a-textarea"></textarea>

    <input type="checkbox" id="socket-a-block-receive" />

    <pre id="socket-a-state" style="font-family: monospace; line-height: 1em; font-size: 13px; font-weight: bold; padding: 10px; outline: 1px dashed lightgray;"></pre>
    <div id="socket-a-log" style="font-family: monospace; line-height: 1em; font-size: 10px;"></div>
</div>

<div style="width: 400px; float: left;">
    <h2>Socket B</h2>

    <button onClick="transportLayerMockB.$$socket.close()">Close</button>
    <button onClick="transportLayerMockB.$$socket.listen()">Listen</button>
    <button onClick="transportLayerMockB.$$socket.connect()">Connect</button>
    <button onClick="transportLayerMockB.$$socket.send([0x86, 0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x21])">Send 'Hello!'</button>
    <button onClick="transportLayerMockB.$$socket.send([0x82, 0x48, 0x69])">Send 'Hi'</button>

    <button onClick="transportLayerMockB.$$socket.send(getByteListFromAsciiString(getFormFieldValue('#socket-b-textarea')))">Send texarea</button>

    <pre id="socket-b-rx-data-chunk" style="border: 1px solid red; padding: 10px;"></pre>

    <textarea id="socket-b-textarea"></textarea>

    <input type="checkbox" id="socket-b-block-receive" />

    <pre id="socket-b-state" style="font-family: monospace; line-height: 1em; font-size: 13px; font-weight: bold; padding: 10px; outline: 1px dashed lightgray;"></pre>
    <div id="socket-b-log" style="font-family: monospace; line-height: 1em; font-size: 10px;"></div>
</div>

<script src="../00-00-00-common/ui/dom-util.js"></script>
<script src="../00-00-00-common/ui/convert-util.js"></script>
<script src="../00-00-00-common/transport-layer/segment.js"></script>
<script src="../00-00-00-common/transport-layer/data-chunk.js"></script>
<script src="../00-00-00-common/transport-layer/socket.js"></script>
<script src="transport-layer.js"></script>

</body>
</html>